<template>
  <el-tooltip :content="content"
              :disabled="!tooltip || disabled"
              :open-delay="1000">
    <slot name="content"
          v-if="$slots.content">

    </slot>
    <img :src="require(`@/assets/img/${icon}`)"
         alt=""
         v-bind="$attrs"
         v-on="$listeners"
         :class="['z-icon items-center justify-center',{
        'z-icon--hover':hover,
         'z-icon--disabled':disabled,
       }]"
         :style="getImgStyle"
         v-if="isImgIcon">
    <span v-else
          v-bind="$attrs"
          v-on="$listeners"
          :class="[`z-icon ${icon} items-center justify-center`,{
        'z-icon--hover cursor-pointer':hover,
        'z-icon--disabled':disabled,
       }]"
          :style="getIconStyle"></span>
  </el-tooltip>

</template>

<script>

export default {
  name: 'ZIcon',
  props: {
    icon: {
      type: String,
      require: true
    },
    size: {
      type: [String, Number],
      default: 16
    },
    color: String,
    hover: Boolean,
    tooltip: Boolean,
    disabled: Boolean,
    content: String
  },
  data () {
    return {

    }
  },
  computed: {
    isImgIcon () {
      return /\.(png|jpe?g|gif|svg)(\?.*)?$/.test(this.icon)
    },

    getIconStyle () {
      const { size, color } = this
      let fs = size
      if (typeof size === 'string') {
        fs = parseInt(size, 10)
      }
      return {
        width: `${fs + 6}px`,
        height: `${fs + 6}px`,
        fontSize: `${fs}px`,
        color: color,
        display: 'inline-flex'
      }
    },
    getImgStyle () {
      const { size, color } = this
      let fs = size
      if (typeof size === 'string') {
        fs = parseInt(size, 10)
      }
      return {
        width: `${fs}px`,
        height: `${fs}px`,
        background: color,
        display: 'inline-flex'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.z-icon {
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-flex;
  &--hover {
    background: #f2f4f8;
    transition: 100ms;
    &:hover {
      background-color: $--theme-color-background;
      color: $--theme-color;
    }
  }
  &--disabled {
    cursor: not-allowed;
    pointer-events: none;
  }
}
</style>
